<template>
  <div>
    <div>
      <Card dis-hover :bordered="false">
        <div class="card">
          <Form>
            <DatePicker
              :editable="false"
              v-width="200"
              placeholder="请选择创建日期"
              class="ivu-mr-8"
              type="daterange"
              v-model="params.timeArr"
              @on-change="changeParams"
            />
            <Select
              class="ivu-mr-8"
              clearable
              v-width="118"
              placeholder="患者状态"
              v-model="params.patient_status_id"
              @on-change="changeParams"
            >
              <Option
                v-for="(item, index) in patient_status"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</Option
              >
            </Select>
            <Select
              class="ivu-mr-8"
              clearable
              v-width="118"
              placeholder="渠道类型"
              v-model="params.source_channel_type"
              @on-change="changeParamsChannel"
            >
              <Option
                v-for="(item, index) in channel"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</Option
              >
            </Select>
            <TreeSelect
              class="ivu-mr-8"
              placeholder="渠道来源"
              v-model="params.source_channel_id"
              :data="channel_types"
              v-width="118"
              clearable
              filterable
              @on-change="changeParams"
            />
            <Select
              class="ivu-mr-8"
              clearable
              v-width="118"
              placeholder="归属人"
              filterable
              v-model="params.belong_member_id"
              @on-change="changeParams"
            >
              <OptionGroup
                v-for="(items, index) in member_list"
                :key="items.value"
                :label="items.label"
              >
                <Option
                  v-for="item in items.children"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </OptionGroup>
            </Select>
            <TreeSelect
              class="ivu-mr-8"
              placeholder="病种"
              v-model="params.diseases_id"
              :data="diseases_list"
              v-width="118"
              clearable
              filterable
              @on-change="changeParams"
            />
          </Form>
          <Row :gutter="16" class="ivu-mt-16">
            <Col :span="12" class="ivu-mb-16">
              <Card dis-hover>
                <h3 v-font="14" class="ivu-mb-8">地区分布</h3>
                <ve-ring :loading="loading" :data="chartData"></ve-ring>
              </Card>
            </Col>
            <Col :span="12" class="ivu-mb-16">
              <Card dis-hover>
                <h3 v-font="14" class="ivu-mb-8">标签</h3>
                <ve-scatter :loading="loading" :data="labelData"></ve-scatter>
              </Card>
            </Col>
            <Col :span="12" class="ivu-mb-16">
              <Card dis-hover>
                <h3 v-font="14" class="ivu-mb-8">年龄分布</h3>
                <ve-pie :loading="loading" :data="ageData"></ve-pie>
              </Card>
            </Col>
            <Col :span="12" class="ivu-mb-16">
              <Card dis-hover>
                <h3 v-font="14" class="ivu-mb-8">性别分布</h3>
                <ve-ring :loading="loading" :data="genderData"></ve-ring>
              </Card>
            </Col>
            <!-- <Col :span="12" class="ivu-mb-16">
                            <Card dis-hover>
                                <h3 v-font="14" class="ivu-mb-8">对话方式</h3>
                                <ve-pie
                                    :loading="loading"
                                    :data="dialogueData"
                                    :settings="chartSettings"
                                ></ve-pie>
                            </Card>
                        </Col> -->
            <Col :span="12" class="ivu-mb-16">
              <Card dis-hover>
                <h3 v-font="14" class="ivu-mb-8">
                  部位
                </h3>
                <ve-pie
                  :loading="loading"
                  :settings="settings"
                  :data="partsData"
                  :legend="legend"
                >
                </ve-pie>
              </Card>
            </Col>
            <Col :span="12" class="ivu-mb-16">
              <Card dis-hover>
                <h3 v-font="14" class="ivu-mb-8">回访次数</h3>
                <ve-ring :data="frequencyData" :loading="loading"></ve-ring>
              </Card>
            </Col>
          </Row>
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import "v-charts/lib/style.css";
import { patientReportInfo, patientReportList } from "@/api/TApi/index.js";
import dayjs from "dayjs";
export default {
  name: "portraitReport",
  data() {
    this.legend = {
      type: "scroll",
    };
    this.settings = {
      offsetY: 250,
    };
    return {
      loading: false,
      // 请求参数
      params: {
        timeArr: [],
        source_channel_type: "",
        belong_member_id: "",
        patient_status_id: "",
        diseases_id: "",
        source_channel_id: "",
      },
      // 来源渠道
      channel: [],
      // 网络来源渠道
      source_channel_list: [],
      // 市场来源渠道
      source_channel_market_list: [],
      // 疾病类型
      diseases_list: [],
      // 归属人
      member_list: [],
      // 患者状态
      channel_types: [],
      patient_status: [],
      chartData: {},
      genderData: {},
      partsData: {},
      labelData: {},
      ageData: {},
      dialogueData: {},
      frequencyData: {
        columns: ["回访次数", "用户数"],
        rows: [
          {
            回访次数: "≤5",
            用户数: 1393,
          },
          {
            回访次数: "5~10",
            用户数: 3530,
          },
          {
            回访次数: "11~20",
            用户数: 2923,
          },
          {
            回访次数: "21~30",
            用户数: 1723,
          },
          {
            回访次数: "≥30",
            用户数: 1723,
          },
        ],
      },
    };
  },
  mounted() {
    this._patientReportInfo();
    this._patientReportList();
  },

  methods: {
    changeParamsChannel(value) {
      if (value === 0) {
        this.channel_types = this.source_channel_list;
      } else if (value === 1) {
        this.channel_types = this.source_channel_market_list;
      } else {
        this.channel_types = [];
      }
      this.params.source_channel_id = "";
    },
    // 初始化下拉框的信息
    _patientReportInfo() {
      patientReportInfo().then((res) => {
        this.source_channel_list = res.source_channel_list;
        this.source_channel_market_list = res.source_channel_market_list;
        this.diseases_list = res.diseases_list;
        this.member_list = res.member_list;
        this.patient_status = res.patient_status;
        this.channel = res.channel;
      });
    },
    // 获取图表数据
    _patientReportList() {
      // 参数初始化
      let params = {
        start_time: this.params.timeArr[0]
          ? dayjs(this.params.timeArr[0]).format("YYYY-MM-DD")
          : "",
        end_time: this.params.timeArr[0]
          ? dayjs(this.params.timeArr[1]).format("YYYY-MM-DD")
          : "",
        belong_member_id:
          this.params.belong_member_id === undefined
            ? ""
            : this.params.belong_member_id,
        patient_status_id:
          this.params.patient_status_id === undefined
            ? ""
            : this.params.patient_status_id,

        diseases_id:
          this.params.diseases_id === undefined ? "" : this.params.diseases_id,
        source_channel_type:
          this.params.source_channel_type === undefined
            ? ""
            : this.params.source_channel_type,
        source_channel_id:
          this.params.source_channel_id === undefined
            ? ""
            : this.params.source_channel_id,
      };
      this.loading = true;
      patientReportList(params).then((res) => {
        this.chartData = Object.freeze(res.city_report);
        this.labelData = Object.freeze(res.tag_report);
        this.ageData = Object.freeze({
          columns: res.age_report.columns,
          rows: res.age_report.rows.map((ee) => {
            return {
              人数: ee.人数,
              年龄段: String(ee.年龄段),
            };
          }),
        });

        this.genderData = Object.freeze(res.gender_report);
        this.dialogueData = Object.freeze(res.dialog_report);
        this.frequencyData = Object.freeze({
          columns: res.callback_num_report.columns,
          rows: res.callback_num_report.rows.map((ee) => {
            return {
              人数: ee.人数,
              回访次数: String(ee.回访次数),
            };
          }),
        });
        this.partsData = Object.freeze(res.body_parts_report);
        this.loading = false;
      });
    },
    // 切换参数
    changeParams() {
      this._patientReportList();
    },
  },
};
</script>
<style lang="less" scoped>
.card {
}
</style>
